<template>
  <div class="vc-p-2 vc-pb-0 vc-flex vc-flex-row vc-flex-wrap vc-items-center">
    <div class="vc-mb-4 vc-w-full">
      <div class="vc-font-semibold vc-mb-2">流动</div>
      <div>
        <button class="vc-btn vc-mr-2" @click="$emit('update:isFloating', !isFloating)">
          {{ isFloating ? "停止" : "开始" }}
        </button>
        <!-- <button
          class="vc-btn vc-mr-2"
          :class="{ 'vc-btn-disable': !isFloating || !isReverse }"
          :disabled="!isFloating || !isReverse"
          @click="$emit('update:isReverse', false)"
        >
          正向
        </button>
        <button
          class="vc-btn"
          :class="{ 'vc-btn-disable': !isFloating || isReverse }"
          :disabled="!isFloating || isReverse"
          @click="$emit('update:isReverse', true)"
        >
          反向
        </button> -->
      </div>
    </div>
    <div v-if="isFloating" class="vc-mb-4 vc-w-full">
      <div class="vc-font-semibold vc-mb-2">速度</div>
      <div>
        <template v-for="val in PipePathSpeed" :key="val">
          <button
            v-if="speedText[val]"
            class="vc-btn vc-mr-1"
            :class="{ 'vc-btn-disable': speed === val }"
            :disabled="speed === val"
            @click="$emit('update:speed', val)"
          >
            {{ speedText[val] }}
          </button>
        </template>
      </div>
    </div>
    <div class="vc-mb-4 vc-mr-4">
      <div class="vc-font-semibold vc-mb-2">外管道尺寸</div>
      <div>
        <input
          v-model="innerStyle.outerSize"
          type="number"
          class="vc-w-16 vc-border vc-border-solid vc-border-gray-200 vc-pl-1 vc-py-1 vc-rounded"
        />px
      </div>
    </div>
    <div v-if="type === PipePathType.flat && innerStyle.outerColor" class="vc-mb-4">
      <div class="vc-font-semibold vc-mb-2">外管道颜色</div>
      <div>
        <input v-model="innerStyle.outerColor" type="color" class="vc-align-middle" />
        <input
          v-model="innerStyle.outerOpacity"
          type="number"
          class="vc-w-12 vc-border vc-border-solid vc-border-gray-200 vc-pl-1 vc-py-1 vc-rounded vc-align-middle"
        /><span class="vc-align-middle">%</span>
      </div>
    </div>
    <div class="vc-mb-4 vc-mr-4">
      <div class="vc-font-semibold vc-mb-2"> 虚线尺寸</div>
      <div>
        <input
          v-model="innerStyle.innerSize"
          type="number"
          class="vc-w-16 vc-border vc-border-solid vc-border-gray-200 vc-pl-1 vc-py-1 vc-rounded"
        />px
      </div>
    </div>
    <div class="vc-mb-4 vc-mr-4">
      <div class="vc-font-semibold vc-mb-2">虚线颜色</div>
      <div>
        <input v-model="innerStyle.innerColor" type="color" />
      </div>
    </div>
    <div class="vc-mb-4">
      <div class="vc-font-semibold vc-mb-2"> 虚线长度和间距</div>
      <div>
        <input
          v-model="innerStyle.dottedSize"
          type="number"
          class="vc-w-12 vc-border vc-border-solid vc-border-gray-200 vc-pl-1 vc-py-1 vc-rounded"
          min="1"
          max="20"
        />,<input
          v-model="innerStyle.dottedMargin"
          type="number"
          min="1"
          max="20"
          class="vc-w-12 vc-border vc-border-solid vc-border-gray-200 vc-pl-1 vc-py-1 vc-rounded"
        />px
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { nextTick, ref, watch } from "vue";
import type { PipePathStyle } from "./types";
import { PipePathSpeed, PipePathType } from "/@/components/types";

const props = defineProps<{
  isFloating: boolean;
  isReverse: boolean;
  speed: PipePathSpeed;
  pipePathStyle: PipePathStyle;
  type: PipePathType;
}>();
const emits = defineEmits(["update:isFloating", "update:isReverse", "update:pipePathStyle", "update:speed"]);
const speedText = ["慢速", "正常", "中等", "快速"];
const innerStyle = ref<PipePathStyle>({ ...props.pipePathStyle });
let triggerPropsWatch = true;
watch(
  innerStyle,
  (v) => {
    if (v.innerSize > v.outerSize) {
      v.innerSize = v.outerSize;
    }
    if (v.outerOpacity < 0) {
      v.outerOpacity = 0;
    } else if (v.outerOpacity > 100) {
      v.outerOpacity = 100;
    }
    triggerPropsWatch = false;
    emits("update:pipePathStyle", { ...v });
    nextTick(() => {
      triggerPropsWatch = true;
    });
  },
  {
    deep: true,
  }
);
watch(
  () => props.pipePathStyle,
  (v) => {
    if (!triggerPropsWatch) return;
    innerStyle.value = v;
  }
);
</script>
